<template>
    <div>
        <el-upload
                :limit="limit"
                :on-remove="onRemoveFile"
                :on-change="onChangeFile"
                :file-list="mFileList"
                :list-type="listType"
                :auto-upload="false"
                accept=".mp4"
                action="string">
            <el-button size="small" type="info">点击上传</el-button>
        </el-upload>
    </div>
</template>

<script lang="ts">
    import {Component, Emit, Prop, Vue} from 'vue-property-decorator'
    import $http from "@/http";
    import {addBaseUrl} from "@/utils/project";
    import {errorMsg} from "@/utils/message";
    import {IMAGE_BASE_URL} from "@/aconst/const";

    @Component({
        name: 'UploadVideo'
    })
    export default class UploadVideo extends Vue {
        //上传请求地址
        @Prop() private url!: any;
        //最大上传数量
        @Prop({default: 100000}) private limit!: any;
        @Prop({default: null}) private maxSize!: any;//单位M
        //文件列表的类型	string	text/picture/picture-card	text
        @Prop({default: "text"}) private listType!: any;
        @Prop({default: []}) private fileList!: any;

        get mFileList() {
            if (this.fileList) {
                return this.fileList;
            }
            return []
        }

        set mFileList(val: any) {
            this.$emit('update:fileList', val)
        }

        private config: any = {'Content-Type': 'multipart/form-data'};


        onRemoveFile(file: any, fileList: any) {
            this.nowFileData(fileList);
            //////console.log("onChangeFile  fileList.Size", fileList.length);

        }

        onChangeFile(file: any, fileList: any) {
            //检查格式
            let array = file.name.toString().split(".");
            if (array.length == 0) return false;
            if (array[array.length - 1] != "mp4") {
                this.cancel(fileList, "只能上传mp4格式文件");
                return false;
            }
            //检查大小
            if (this.maxSize) {
                if (file.size > this.maxSize * 1024 * 1024) {
                    this.cancel(fileList, "上传文件超出限制大小" + this.maxSize + "M");
                    return false;
                }
            }

            //////console.log("onChangeFile  fileList.Size", fileList.length);
            let formData = new FormData();
            fileList.forEach((file: any) => {
                if (file.raw instanceof Blob) {
                    formData.append("files", file.raw, file.name);
                }
            });

            $http.post(this.url, formData, this.config).then((res: any) => {
                if (res.success) {
                    this.nowFileData(this.fileList.concat(addBaseUrl(res.data)));
                } else {
                    let filter = fileList.filter((item: any) => {
                        return !(file.raw instanceof Blob);
                    });
                    this.nowFileData(filter);
                }
            });
        }

        @Emit("nowFileData")
        nowFileData(fileList: any) {
            //设置详情
            let dataArray: any = [];
            // //////console.log("fileList--nowFileData", JSON.stringify(fileList));
            fileList.forEach((file: any) => {
                // //////console.log("getPath--getPath", JSON.stringify(file));
                dataArray.push({
                    id: file.id, url: file.original,
                    fullUrl: IMAGE_BASE_URL + file.original,
                    name: file.name
                });
            });

            // //////console.log("dataArray", dataArray);
            return {fileList: fileList, dataArray: dataArray};
        }

        //     return this.value
        // }
        //
        // set show(value) {
        //     this.$emit('input', value)
        // }
        //
        // get language() {
        //     return this.languageTypeList[AppModule.language]
        // }
        //
        // private srcFileSet(fileName: string, fileType: string, fileSize: number) {
        //     this.$emit('src-file-set', fileName, fileType, fileSize)
        // }
        //
        // private cropSuccess(imgDataUrl: string, field: string) {
        //     this.$emit('crop-success', imgDataUrl, field)
        // }
        //
        // private cropUploadSuccess(jsonData: any, field: string) {
        //     this.$emit('crop-upload-success', jsonData, field)
        // }
        //
        // private cropUploadFail(status: boolean, field: string) {
        //     this.$emit('crop-upload-fail', status, field)
        // }


        cancel(fileList: any, message: any) {
            errorMsg(message);
            let filter = fileList.filter((item: any) => {
                return !(item.raw instanceof Blob);
            });
            this.nowFileData(filter);
        }

        getWeekDay(dateString: any) {//得到一个日期，计算出这个日期所在周的7天的日期
            let dateStringReg = /^\d{4}[/-]\d{1,2}[/-]\d{1,2}$/;

            if (dateString.match(dateStringReg)) {
                let presentDate = new Date(dateString),
                    today = presentDate.getDay() !== 0 ? presentDate.getDay() : 7;

                return Array.from(new Array(7),
                    function (val, index) {
                        return formatDate(new Date(presentDate.getTime() - (today - index - 1) * 24 * 60 * 60 * 1000));
                    });

            } else {
                throw new Error('dateString should be like "yyyy-mm-dd" or "yyyy/mm/dd"');
            }

            function formatDate(date: any) {
                return (date.getMonth() + 1) + '.' + date.getDate();
            }
        }


    }
</script>
<style scoped>

    .avatar-uploader .el-upload {
        border: 1px dashed #d9d9d9;
        border-radius: 6px;
        cursor: pointer;
        position: relative;
        overflow: hidden;
    }

    .avatar-uploader .el-upload:hover {
        border-color: #409EFF;
    }

    .avatar-uploader-icon {
        font-size: 28px;
        color: #8c939d;
        width: 178px;
        height: 178px;
        line-height: 178px;
        text-align: center;
    }

    .avatar {
        width: 178px;
        height: 178px;
        display: block;
    }
</style>
